<template>
  <div id="lyk_list">
    <van-collapse v-model="activeNames">
      <van-collapse-item name="1">
        <template #title>
          <el-button :type="$store.state.name === 1 ? 'primary' : 'warning'" plain>未完成</el-button>
        </template>
        <ul>
          <li v-for="item in list" :key="item.id">
            <input type="checkbox" :checked="item.done" @change="(e)=>{getChangeInput(e,item.id)}" />
            <span>{{item.title}}</span>
            <span @click="getCancel(item.id)">取消</span>
          </li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="已完成" name="2">
        <ul>
          <li v-for="item in accomplish" :key="item.id">
            <span>{{item.title}}</span>
            <span>{{date | aa('YYYY-MM-DD hh:mm:ss')}}</span>
          </li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="已取消" name="3">
        <ul>
          <li v-for="item in  cancel" :key="item.id">
            <span>{{item.title}}</span>
            <span @click="getRecover(item.id)">恢复</span>
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>
   <proup></proup>
  </div>
</template>
<script>
import proup from "@/components/proup";
import { mapState, mapMutations, mapActions } from "vuex";
import moment from "moment";
export default {
  components:{proup},
  data() {
    return {
      date: new Date(),
      falg: false,
      activeNames: ["1"]
    };
  },
  methods: {
    ...mapMutations(["getCancel", "getChangeInput", "getRecover"]),
    getChangeInput(e, id) {
      console.log(e.target.checked);
      const parms = {
        id: id,
        status: e.target.checked
      };
      this.$store.commit("getChangeInput", parms);
    }
  },
  computed: {
    ...mapState(["list", "accomplish", "cancel"])
  },
  filters: {
    aa(msg, str) {
      return moment(msg).format(str);
    }
  }
};
</script>
<style lang="scss" scoped>
#lyk_list {
  flex: 1;
}
li {
  display: flex;
  justify-content: space-between;
}
</style>